<style scoped >
 .number {
  display: inline-block;
  margin-bottom: 10px;
  text-align: center;
}
ul {
  display: inline-block;
  text-align: center;
  list-style: none;
}
li {
  float: left;
  text-align: center;
  margin: 0;
}
.dataBoc {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.tt {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.tt span {
  width: 100%;
  height: 100%;
  float: left;
  text-align: center;
  background-size: 100% 100%;
  background-repeat: no-repeat;
}
</style>
<template style="display: inline-block;">
  <div class="number">
    <ul ref="dataNums" :style="{ height: (this.option.height || 40) + 'px' }">
      <li v-for="(item, index) in list" :key="index" :style="numBoxStyle">
        <div class="dataBoc">
          <div
            class="tt"
            :style="{
              transition: 'all ' + scrollSpeed + 's ease-in-out 0s',
              top: '-' + item.top + 'px',
            }"
          >
            <span
              v-for="(item2, index2) in numList"
              :key="index2"
              :style="numStyle"
              >{{ item2 }}</span
            >
          </div>
        </div>
      </li>
    </ul>
  </div>
</template>
<script>
export default {
  name: "scrollNums",
  props: {
    num: Number | String,
    option: Object,
  },
  data() {
    return {
      scrollTimer: null,
      list: [],
      //   numList: [0,1,2,3,4,5,6,7,8,9,"."],
      numList: [1, 2, 3, 4, 5, 6, 7, 8, 9, 0, 1, 2, 3, 4, 5, 6, 7, 8, 9],
    };
  },
  computed: {
    numBoxStyle() {
      return {
        width: (this.option.width || 20) + "px",
        height: (this.option.height || 40) + "px",
        lineHeight: (this.option.height || 40) + "px",
        fontSize: (this.option.fontSize || 20) + "px",
        marginLeft: (this.option.margin || 4) + "px",
        marginRight: (this.option.margin || 4) + "px",
      };
    },
    numStyle() {
      return {
        background: this.option.background || "transparent",
        color: this.option.color || "#fff",
        borderRadius: (this.option.borderRadius || 0) + "px",
        fontWeight: this.option.bold ? "bold" : "normal",
      };
    },
    scrollSpeed() {
      return this.option.scrollSpeed || 0.5;
    },
    number() {
      return this.num;
    },
  },
  methods: {
    init() {
      this.scroll();
    },
    scroll() {
      this.list = this.num.toString().split("");
      console.log(this.list,"list")
      let arr = [];
      this.list = this.list.map((item) => {
        return {
          num: item - 0,
          top: 0,
        };
      });
      let Hei = this.option.height || 40;
      this.list.forEach((item, index) => {
        item.sNum = item.num - 1;
        setTimeout(() => {
          item.top = parseFloat((item.num - 1) * Hei) || 10 * Hei;
        }, 300);
      });
    },
    updateScroll(val, oldVal) {
      var remainNum = val - oldVal;
      if((val+'').length > (oldVal+'').length){
        this.list.unshift({
          num:1,
          top:0
        })
      }
      let remainScrollArr = (remainNum + "").split("").reverse(),
        length = this.list.length - 1,
        top = 0;
      let Hei = this.option.height || 40;
      let newArr = [],
        isPlus = false;
      remainScrollArr.forEach((item, i) => {
        let num = this.list[length].num - 0 + (item - 0) + (isPlus ? 1 : 0);
        if (num >= 10) {
          if (newArr[i]) {
            newArr[i] += item - 0;
          } else {
            newArr.push(item - 0);
          }

          if (newArr[i + 1]) {
            newArr[i + 1] = newArr[i + 1] - 0 + 1;
            if (newArr[i + 1] >= 10) {
              newArr.push(1);
              newArr[i + 1] = 10 - newArr[i + 1];
            }
          } else {
            newArr.push(1);
          }
          isPlus = true;
        } else {
          isPlus = false;
          if (!newArr[i]) {
            newArr.push(item - 0);
          } else {
            newArr[i] += item - 0;
            if (newArr[i] >= 10) {
              newArr.push(1);
              newArr[i] = 10 - newArr[i];
            }
          }
        }
        length--;
      });
      length = this.list.length - 1;
      newArr.forEach((item, i) => {
        let num = this.list[length].num + (item - 0);
        if (num >= 10) {
          this.list[length].num = num - 10;
        } else {
          this.list[length].num += item;
        }
        if (num == 10) {
          this.list[length].top = 9 * Hei;
        } else if (num > 10) {
          this.list[length].top = Hei * (num - 10 - 1);
        } else {
          this.list[length].top = Hei * (num - 1);
        }
        length--;
      });
    },
  },
  mounted() {
    this.init();
  },
  watch: {
    "option.scrollSpeed": {
      handler(val, oldval) {
        if (val) {
          this.init();
        }
      },
      deep: true,
    },
    num(val, oldVal) {
      var remainNum = val - oldVal;
      if (remainNum > 0 && remainNum < 50) {
        this.updateScroll(val, oldVal);
      } else {
        this.init();
      }
    },
  },
};
</script>